import { SelectListApi, SelectPageApi } from "@/api";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import SelectItem from "./components/SelectItem";
import "./Select.less";
interface IParams {
  actionCode: string;
  //可以让Iparams的实例对象。通过[key]的设置访问和设置属性，索引器
  [key: string]: string;
}
const TestTypes: ISelectOption[] = [
  { key: "全部", value: "all" },
  { key: "未做", value: "notdone" },
  { key: "已做", value: "done" },
  { key: "错误", value: "err" },
];
const TestNumbs: ISelectOption[] = [
  { key: "5", value: 5 },
  { key: "10", value: 10 },
  { key: "20", value: 20 },
  { key: "30", value: 30 },
  { key: "50", value: 50 },
  { key: "100", value: 100 },
];


const TypeMap: ITypeMap = {
  all: "全部",
  qa: "问答",
  fill: "填空",
  one: "单选",
  check: "判断",
  code: "编程",
  many: "多选",
};


function useQuestionParams(): [IDataParams, Function] {
  const { actionCode } = useParams<IParams>();
  const [testNum, setTestNum] = useState(5);
  const [testType, setTestType] = useState("all");
  const [questionType, setQuestionType] = useState("all");

  function setData(params: IDataParams) {
    params.testNum && setTestNum(params.testNum);
    params.testType && setTestType(params.testType);
    params.questionType && setQuestionType(params.questionType);
  }

  const data: IDataParams = { actionCode, testNum, testType, questionType };
  return [data, setData];
}

export default function Select() {
  // 通过下面的三个组件得到的去练习页面请求数据的对象
  const [data, setData] = useQuestionParams();
  const [questionTypes, setQuestionTypes] = useState<ISelectOption[]>([]);
  // console.log(params.actionCode);
  useEffect(() => {
    SelectPageApi(data.actionCode!).then((res) => {
      if (res.errCode === 0) {
        // res.data 里面的数据是  {key:'all',value:12}
        // 我们想要的是 {key:'全部12',value:'all'}
        // TypeMap[res.data[0].key] + '' + res.data[0].value === 全部12
        let temp = res.data.map((item) => {
          return {
            key: TypeMap[item.key] + item.value, // 全部12
            value: item.key, // all
          };
        });
        setQuestionTypes(temp);
      }
    });
    
  }, []);
  const navigate = useNavigate();
  const gotoPratice = () => {
    navigate("/practice", {
      state: data,
    });
  };
  return (
    <div className="select">
      <div className="model">
        <div onClick={gotoPratice}>进入练习模式</div>
        <div className="btn2">进入考试模式（暂不开放）</div>
      </div>
      <SelectItem
        title="试题分类"
        data={TestTypes}
        onChange={(val) => {
          setData({
            testType: val,
          });
        }}
      />
      <SelectItem
        title="题目分类"
        data={questionTypes}
        onChange={(val) => {
          setData({
            questionType: val,
          });
        }}
      />
      <SelectItem
        title="做题数量"
        data={TestNumbs}
        onChange={(val) => {
          setData({
            testNum: val,
          });
        }}
      />
    </div>
  );
}
